<!-- 逆变器统计 -->
<template>
  <div>
    <div class="content">
      <h4 id="title">{{ $t('licence.inv_Title')}}</h4>
      <div class="main-content">
        <div class="title">
          <!-- 年月日选择 -->
          <div class="time-box">
            <el-radio-group style="margin-right: 20px" v-model="radio" fill="#305ADD" border="true"
              @change="getInverterStatistics">
              <el-radio-button :label="1">{{ $t('licence.sta_day')}}</el-radio-button>
              <el-radio-button :label="2">{{ $t('licence.sta_week')}}</el-radio-button>
              <el-radio-button :label="3">{{ $t('licence.sta_month')}}</el-radio-button>
              <el-radio-button :label="4">{{$t('licence.sta_quarter')}}</el-radio-button>
              <el-radio-button :label="5">{{ $t('licence.sta_year')}}</el-radio-button>
              <el-radio-button :label="6">{{ $t('licence.sta_liyear')}}</el-radio-button>
            </el-radio-group>
            <!-- <el-select v-if="radio == 1" v-model="powerState" :placeholder="$t('licence.inv_type0')" @change="selectChanged"
              clearable>
              <el-option v-for="item in options" :key="item.key" :label="$t('licence.inv_type' + item.key)"
                :value="item.key">
              </el-option>
            </el-select> -->
            <!-- 选择逆变器 -->
            <el-select v-model="checkboxList" multiple collapse-tags filterable :placeholder="$t('licence.para_xuanze')" style="margin: 0 20px">
              <div class="select_up">
                <el-button type="text" @click="selectAll"><el-icon><CircleCheck /></el-icon>{{$t('licence.sys_selectAll')}}</el-button>
                <el-button type="text" @click="selectReverse"><el-icon><CopyDocument /></el-icon>{{$t('licence.sys_cancelAll')}}</el-button>
              </div>
              <div class="select_list">
                <el-option v-for="item in inverterList" :key="item.lable" :label="item.lable" :value="item.id">
                  <!-- <span style="float: left; color: #8492a6; font-size: 13px">{{ item.lable }}</span> -->
                  <p class="img normal" v-if="item.faultState == 0"></p>
                  <p class="img alarm" v-if="item.faultState == 1"></p>
                  <p class="img offline" v-if="item.faultState == 2"></p>
                  <span>{{ item.lable }}</span>
                </el-option>
              </div>
            </el-select>
            <!-- 选择维度（电压电流） -->
            <el-select v-if="radio == 1"  v-model="checkedCities" multiple :placeholder="$t('licence.inv_type0')" @change="checkInver"
              clearable>
              <el-option v-for="item in dimensionList" :key="item.id" :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>

            <el-date-picker v-if="radio == 1" v-model="stockDate" type="daterange" range-separator="-"
              :start-placeholder="$t('licence.use_kaishi')" :end-placeholder="$t('licence.use_jieshu')"
              format="YYYY/MM/DD" value-format="YYYY-MM-DD"
              :disabled-date="disabledDate" style="margin: 0 20px">
            </el-date-picker>
            <el-date-picker v-if="radio != 1" style="margin: 0 20px; width: 180px" :clearable="true"
              v-model="startDay.stockDate" type="date" :disabled-date="disabledDate"
              format="YYYY/MM/DD" value-format="YYYY-MM-DD"
              :placeholder="$t('licence.sta_selectDate')" @change="changeTime">
            </el-date-picker>

            <el-button @click="getInverterStatistics" type="primary" style="margin: 20px 0">{{ $t('licence.fau_Thequery')}}</el-button>
          </div>
          <div class="flexEnd">
            <el-button type="primary" plain v-if="radio == 1" @click="ExportT">{{ $t('licence.sta_origin_export') }}</el-button>
            <el-button type="primary" plain @click="Export">{{ $t('licence.sta_statistic_export') }}</el-button>
          </div>
        </div>
        <!-- 数据曲线图 -->
        <div>
          <!-- 发电趋势 -->
          <div class="title" id="title" v-loading="loading">
            <div id="TrendcurveData" class="curveData" ref="curveData" v-if="radio <= 3"></div>
            <div id="zhuzhuangData" class="curveData" ref="curveData" v-else></div>
          </div>
        </div>
      </div>
    </div>
    <div class="content-two" style="margin-top: 20px"  v-if="radio > 1">
      <div style="
          display: flex;
          justify-content: space-between;
          align-items: baseline;
        ">
        <h4 id="title">{{ $t('licence.inv_title')}}</h4>
      </div>
      <el-table :data="InverterStatistics" height="400" style="width: 100%">
        <el-table-column v-for="(item, index) in Inverterhend" :key="index" :label="item.label" :property="item.property">
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup name="InverterStatistics" lang="ts">
import * as echarts from "echarts";
import {getpsStatistic,getAllInveters,getpsStatisticExport,getpsDataExport,} from "@/api/statisticalData/InverterStatistics";
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
      const disabledDate = (time: Date) => {
        return time.getTime() > Date.now()
      }
      const powerStation = ref({
        id:-1
      }) //获取保存电站信息
      // 查询功能
      // 日期
      const radio = ref(1)//年月日默认选择
      // 时间选择器
      const getNowTime = () => {
        const now = new Date();
        const year = now.getFullYear();
        const month = now.getMonth() + 1;
        const date = now.getDate();

        const defaultDate = `${year}-${month.toString().padStart(2, '0')}-${date.toString().padStart(2, '0')}`;
        return [defaultDate,defaultDate];
      }
      const getNowTimes = ():string => {
        const now = new Date();
        const year = now.getFullYear();
        const month = now.getMonth() + 1;
        const date = now.getDate();

        const defaultDate = `${year}-${month.toString().padStart(2, '0')}-${date.toString().padStart(2, '0')}`;
        return defaultDate;
      }
      const startDay = ref({
        stockDate: getNowTimes() //日期选择
      })
      const stockDate = ref(getNowTime()) //日期选择
      // 下拉选择状态
      // 查询状态
      const options = [
        {key: 0,},{key: 1,},{key: 2,},{key: 3,},{key: 4,},{key: 5,}
        ,{key: 6,},{key: 7,},{key: 8,},{key: 9,},{key: 10,},{key: 11,},
      ]
      const checkedCities =ref([1,2])
      const powerState = ref(0) //查询下拉绑定默认字段
      const InverterStatistics = ref<any[]>([]) //数据
      const Inverterhend = ref([{
        label:'',
        property:'',
      }]) //表头
      // const nibianqi = ref('')
      const exportAttritute = ref<{ [key: string]: boolean }>({});
      const isAllSelect = ref(false) // 是否全选逆变器
      const allSelectedLegent = ref({})
      const lang = ref(0)
      const loading = ref(true)//加载状态
      const colorEcharts = ref<any[]>([])//颜色数组
      const inverterList = ref([])
      const checkboxList = ref([])
      let dimensionList: any[] = []
  onMounted(()=>{
    // 获取语言
    if (localStorage.getItem("locale") == "en_US") {
      lang.value = 1;
      dimensionList = [{
      id:0,
      name:'input power',
      unit: 'power(W)',
      type:1
    },{
      id:1,
      name:'output power',
      unit: 'power(W)',
      type:1
    },{
      id:2,
      name:'power generation',
      unit: 'power generation(kWh)',
      type:2
    },{
      id:3,
      name:'input voltage',
      unit: 'voltage(V)',
      type:3
    },{
      id:4,
      name:'input current',
      unit: 'current(A)',
      type:4
    },{
      id:5,
      name:'output voltage',
      unit: 'voltage(V)',
      type:3
    },{
      id:6,
      name:'output current',
      unit: 'current(A)',
      type:4

    },{
      id:7,
      name:'bus voltage',
      unit: 'voltage(V)',
      type:3
    },{
      id:8,
      name:'inverter temperature',
      unit: 'temperature(℃)',
      type:5
    },{
      id:9,
      name:'Boost temperature',
      unit: 'temperature(℃)',
      type:5
    },{
      id:10,
      name:'power factor',
      unit:'( )',
      type:6
    },{
      id:11,
      name:'leakage current',
      unit:'Leakage current(mA)',
      type:7
    }]
    } else {
      lang.value = 0;
      dimensionList = [{
      id:0,
      name:'输入功率',
      unit: '功率(W)',
      type:1
    },{
      id:1,
      name:'输出功率',
      unit: '功率(W)',
      type:1
    },{
      id:2,
      name:'发电量',
      unit: '发电量(kWh)',
      type:2
    },{
      id:3,
      name:'输入电压',
      unit: '电压(V)',
      type:3
    },{
      id:4,
      name:'输入电流',
      unit: '电流(A)',
      type:4
    },{
      id:5,
      name:'输出电压',
      unit:'电压(V)',
      type:3
    },{
      id:6,
      name:'输出电流',
      unit:'电流(A)',
      type:4
    },{
      id:7,
      name:'母线电压',
      unit:'电压(V)',
      type:3
    },{
      id:8,
      name:'逆变器温度',
      unit:'温度(℃)',
      type:5
    },{
      id:9,
      name:'Boost温度',
      unit:'温度(℃)',
      type:5
    },{
      id:10,
      name:'功率因数',
      unit:'( )',
      type:6
    },{
      id:11,
      name:'漏电流',
      unit:'漏电流(mA)',
      type:7
    }]
    }
    // 获取电站信息
    powerStation.value = JSON.parse(localStorage.getItem("powerStation")as string);
    // 逆变器统计
    getInverter();
    // 数据图
    // getTrendcurveData()
    // 全选/反选
    // checkedAll()
  })
  watch([checkedCities, checkboxList], () => {
    handleMultiplication();
  });
  const getInverter = async() => {
      let res = await getAllInveters({ stationId: powerStation.value.id })
      inverterList.value = res.data
      let id;
      let obj =inverterList.value.find(i=>i.faultState == 0)//默认选择在线的逆变器
      if(obj) id=obj.id;
      else id = inverterList.value[0].id
      checkboxList.value.push(id);
      getInverterStatistics();
    }
    const ExportT = async ()=> {
      let names = [];
      for (let k in exportAttritute.value) {
        if (exportAttritute.value[k]) names.push(k);
      }
      const res = await getpsDataExport({
        psIds: checkboxList.value.join(','),
        startDay:
          radio.value == 1
            ? stockDate.value
              ? stockDate.value[0]
              : ""
            : startDay.value.stockDate, //开始时间
        endDay: stockDate.value ? stockDate.value[1] : "", //结束时间
        lang: lang.value,
      });
      let url = window.URL.createObjectURL(
        new Blob([res], { type: "application/vnd.ms-excel" })
      );
      let link = document.createElement("a");
      link.style.display = "none";
      link.href = url;
      link.setAttribute("download", t("licence.inv_tongji") + ".xls");
      document.body.appendChild(link);
      link.click();
    }
    // 获取逆变器曲线图
    const checkInver = (value:any) => {
        // 在选择变化时的处理逻辑
      const selectedTypes = checkedCities.value.map((selectedValue:any) => {
        const selectedItem = dimensionList.find((option:any) =>  option.id === selectedValue);
        return selectedItem.type;
      });
      // 判断是否有某个 type 出现两次以上
      const hasMoreTwoType = ([...new Set(selectedTypes)].length>2)?true:false; // 去重后的类型数组;
      // 如果有则取消当前的勾选
      if (hasMoreTwoType) {
        ElMessage.warning('同一类型的选项最多只能选择一次');
        // 这里可以根据实际需求取消当前选中的项
        checkedCities.value = checkedCities.value.slice(0, -1);
      }else{
          const myChart = echarts.init(document.getElementById("TrendcurveData") as HTMLElement);
          myChart.clear();
      }
    }
    // 逆变器数据导出
    const Export = async() => {
      const res = await getpsStatisticExport({
        stationId: powerStation.value.id,
        timeType: radio.value,
        startDay:
          radio.value == 1
            ? stockDate.value
              ? stockDate.value[0]
              : ""
            : startDay.value.stockDate, //开始时间
        endDay: stockDate.value ? stockDate.value[1] : "", //结束时间
        optionType: checkedCities.value.join(','),
        lang: lang.value,
      });
      let url = window.URL.createObjectURL(
        new Blob([res], { type: "application/vnd.ms-excel" })
      );
      let link = document.createElement("a");
      link.style.display = "none";
      link.href = url;
      link.setAttribute("download", t("licence.inv_tongji") + ".xls");
      document.body.appendChild(link);
      link.click();
    }
    // 逆变器统计
    const getInverterStatistics =  async ()  => {
      loading.value = true;
      let query = {
        psIds: checkboxList.value.join(','),
        timeType: radio.value,
        lang: lang.value,
        startDay:
          radio.value == 1
            ? stockDate.value
              ? stockDate.value[0]
              : ""
            : startDay.value.stockDate, //开始时间
        endDay: stockDate.value ? stockDate.value[1] : "", //结束时间
        optionType: checkedCities.value.join(','),
      };
      function getNames (nums:any, objects:any) {
        let names = [];
        for (let i = 0; i < nums.length; i++) {
          for (let j = 0; j < objects.length; j++) {
            if (nums[i] === objects[j].id) {
              names.push(objects[j].unit);
              break;
            }
          }
        }
        return [...new Set(names)]; // 去重后的类型数组;;
      }
      if (radio.value > 1) { checkedCities.value = [2] }
      let units = getNames(checkedCities.value.sort((a,b)=>a-b), dimensionList);
      let res = await getpsStatistic(query);
      loading.value = false;

      allSelectedLegent.value = res.data.charts.series;
      let myChart;
      if (radio.value <= 3) {
        let series:any = []; //数据
        let yAxis:any = []; //数据
        let legendName:any = []; //提示标题
        let selectedLegent: Record<string, boolean> = {}; // 默认展示数据
        myChart = echarts.init(document.getElementById("TrendcurveData") as HTMLElement) as echarts.ECharts;
        if (!res.data.charts.seriesList) {
          let option = { title: { text: '暂无数据', x: 'center', y: 'center', textStyle: { fontSize: 16, fontWeight: 'normal', } } }
          myChart.setOption(option, true)
          InverterStatistics.value = []
          return;
        } else {
          myChart.clear()
          res.data.charts.seriesList&&res.data.charts.seriesList.forEach((item:any, index:any) => {
            // 1.只默认展示前两个 后面的都是FALSE
            item.forEach((i:any, n:number) => {
              if (exportAttritute.value) {
                selectedLegent = exportAttritute.value;
              } else {
                selectedLegent[i.source] = true;//初始化都先不选中
              }
              legendName.push(i.source);
              series.push({
                // 这里就放进去多少
                name: i.source,
                type: "line",
                // stack: "Total",
                symbol: "none",
                // // 堆叠
                // center:['50%','60%'],
                smooth: true,
                lineStyle: {
                  normal: {
                    color: colorEcharts.value[(i.length)*index+n], //  color 自己定义的颜色数组根据索引
                    lineStyle: {
                      width: 1, //设置线条粗细
                    },
                  },
                },
                emphasis: {
                  focus: "series",
                },
                data: i.data,
                yAxisIndex: index,
              });

            })
            yAxis.push({
              type: "value",
              // name: units[index],
              // position: index == 1 ? 'right' : 'left',
              axisTick: {
                show: false,
              },
              axisLine: {
                show: false,
              },
              axisLabel: {
                // 保留一位小数
                formatter: function (value) {
                  return value.toFixed(1) + units[index].match(/\((.*?)\)/)[1] ;
                },
              },
            });
          });
        }
        exportAttritute.value = selectedLegent;
        // 曲线图
        getTrendcurveData(
          res.data.charts.categories,
          yAxis,
          legendName,
          series,
          selectedLegent
        );
      } else {
        // myChart.clear()
        let series:any = []; //数据
        let legendName:any = []; //提示标题
        let selectedLegent: Record<string, any> = {}; // 默认展示数据
        if (res.data.charts.seriesList[0] == null) {
          return;
        } else {
          res.data.charts.seriesList[0].forEach((item:any, index:any) => {
            // 1.只默认展示前两个 后面的都是FALSE
            if (exportAttritute.value) {
              selectedLegent = exportAttritute.value;
            } else {
              selectedLegent[item.source] = true;
            }
            legendName.push(item.source);
            series.push({
              // 这里就放进去多少
              name: item.source,
              type: "bar",
              barWidth: "16",
              smooth: true,
              lineStyle: {
                width: 0,
              },
              showSymbol: false,
              areaStyle: {
                opacity: 0.8,
                color: colorEcharts.value[index], //  color 自己定义的颜色数组根据索引
              },
              emphasis: {
                focus: "series",
              },
              data: item.data,
            });
          });
        }
        exportAttritute.value = selectedLegent;
        // 柱状图
        getzhuzhuangData(
          res.data.charts.categories,
          legendName,
          series,
          selectedLegent
        );
      }

      InverterStatistics.value = res.data.statisticVos;
      Inverterhend.value = res.data.headField;
    }
    const changeTime = (val:string) => {
      proxy!.$forceUpdate(); //需要使用强制更新
      startDay.value.stockDate = val;
    }
    // // 数据曲线图 data其他用处  series数据
    const getTrendcurveData = (categories:any, yAxis:any, legendName:any, series:any, selectedLegent:any) => {
      const myChart = echarts.init(
        document.getElementById("TrendcurveData") as HTMLElement)as echarts.ECharts;
      // 监听图例发生变化
      myChart.on("legendselectchanged", (obj:any) => {
        const { selected, name } = obj; // selected：包含所有图例的状态，name：当前点击图例的名称
        // exportAttritute 放入选择的图例 这个就是选择的图例
        exportAttritute.value = selected;
      });

      myChart.setOption({
        color: colorEcharts.value,
        // 悬浮提示
        tooltip: {
          show: true,
          trigger: "axis",
          backgroundColor: "#656565",
          textStyle: { color: "#ffffff" },
          extraCssText: "box-shadow: 0px 2px 5px 0px rgba(50,107,174,0.19);",
          formatter: function(series:any) {
            let tooltipContent = `${series[0].name}<br />`; // 第一行展示 x 轴的数值
            // 遍历 series，series 是当前位置的数据
            series.forEach(function(item:any,index:number) {
            // 示例中假设 item.value 是一个对象，包含两个属性
            // 你可以根据自己的数据结构来调整显示内容
            if (item.value) {
              tooltipContent += `${item.marker} ${item.seriesName}: ${item.value} ${(index+1)%2==0?'<br/>':'    '}`;
            }
            });
            return tooltipContent;
          }
        },
        //
        legend: {
          icon: "circle",
          type: 'scroll',
          selected: selectedLegent,
          orient: 'vertical',
          right: 10,
          top: 20,
          bottom: 20,
          data: legendName
        },
        grid: {
          left: '5%',
          right: '20%',
          bottom: '10%',
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: categories,
          },
        ],
        yAxis: yAxis,
        series: series, // 传过来的就是根据用户返回的数据条数来的长度有多少
      });
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    }
    //柱状图
    const getzhuzhuangData = (categories:any, legendName:any, series:any, selectedLegent:any) =>  {
      const myChart = echarts.init(
        document.getElementById("zhuzhuangData") as HTMLElement)as echarts.ECharts;
      // const myChart = echarts.init(document.getElementById("zhuzhuangData"));
      // 监听图例发生变化
      myChart.on("legendselectchanged", (obj:any) => {
        const { selected, name } = obj; // selected：包含所有图例的状态，name：当前点击图例的名称
        // exportAttritute 放入选择的图例 这个就是选择的图例
        exportAttritute.value = selected;
      });
      let option = {
        color: colorEcharts.value,
        // 悬浮提示
        tooltip: {
          show: true,
          trigger: "axis",
          backgroundColor: "#656565",
          textStyle: { color: "#ffffff" },
          extraCssText: "box-shadow: 0px 2px 5px 0px rgba(50,107,174,0.19);",
        },
        legend: {
          icon: "circle",
          data: legendName,
          selected: selectedLegent,
        },
        grid: {
          top: "20%", //距上边距
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",

            axisTick: { show: false },
            data: categories,
          },
        ],
        yAxis: [
          {
            type: "value",
            // name: series[0].unit,
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              formatter: "{value}",
            },
            min: 0,
            splitNumber: 6, // 坐标轴的分割段数(预估值)
          },
        ],
        series: series,
      }
      if (radio.value == 5) option.dataZoom = [
        {
          type: 'slider',
          show: true,
          start: 94,
          end: 100,
          handleSize: 8
        },
        {
          type: 'inside',
          start: 94,
          end: 100
        },
      ]
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    }

    //#region 处理颜色
    const handleMultiplication = () => {
      const result = checkedCities.value.length * checkboxList.value.length;
      gernerationColor(result);
    }
    const gernerationColor = (numColors:number) =>{
      colorEcharts.value = []
      const baseColors = [
      "#5ab1ef", "#ffb980", "#d87a80", "#8d98b3", "#e5cf0d",
      "#97b552", "#95706d", "#dc69aa", "#07a2a4", "#9a7fd1",
      "#588dd5", "#f5994e", "#c05050", "#59678c", "#c9ab00"
      ];
      const colors = [];
      for (let i = 0; i < numColors; i++) {
      // 使用循环获取颜色，确保循环使用基础颜色数组
      colors.push(baseColors[i % baseColors.length]);
      }
      colorEcharts.value=colors
    }

    //#endregion

    //#region 逆变器选择
    //清空操作
    const removeTag = () => {
      checkboxList.value = []
    }
    //全选操作
    const selectAll = (val:any) => {
      inverterList.value.map(item => {
        if (!checkboxList.value.includes(item.id)) {
          checkboxList.value.push(item.id)
        }
      })
    }
    //反选操作
    const selectReverse = (val:any) => {
      val = []
      inverterList.value.map(item => {
        let index = checkboxList.value.indexOf(item.id);
        //判断现有选中数据是否包含如果不包含则进行反选数据
        if (index != -1) {
        } else {
          val.push(item.id)
        }
      })
      checkboxList.value = val
    }
    //#endregion

</script>

<style scoped lang="scss">
* {
  margin: 0;
  // padding: 0;
  box-sizing: border-box;
}

// 曲线图
.curveData {
  width: 100% !important;
  height: 600px;
  // background-color: #FFF;
}

// 分页
.block {
  display: flex;
  justify-content: end;
}

.content,
.content-two {
  width: 100%;
  background-color: #fff;
  padding: 20px 20px 30px 20px;
  border-radius: 6px;

  #title {
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 600;
    color: #0e1319;
    margin-bottom: 20px;
  }

  // ========
  .title {
    display: flex;
    align-items: baseline;

    .time-box {
      flex: 1;
      margin: -20px 0 20px -10px;

      // 年月日选择
      ::v-deep .el-radio-button__inner {
        border: none;
        border-radius: 4px;
        background: #e7e7e7;
        margin-left: 10px;
      }

      ::v-deep .el-radio-button:first-child .el-radio-button__inner {
        border-radius: 4px;
      }

      ::v-deep .el-radio-button--mini .el-radio-button__inner {
        padding: 6px 12px;
      }
    }
  }

  .export {
    height: 36px;
    border-radius: 4px;
    border: 1px solid #dddfe6;
    font-size: 14px;
    text-align: center;
    line-height: 36px;
    cursor: pointer;
  }

  .active {
    color: #305add;
  }

  // 查询按钮
  .el-button--primary {
    color: #ffffff;
    background-color: #305add;
    border-color: #305add;
  }
}
.el-radio-group{
  vertical-align: middle;
}

.el-select-dropdown__list {
  height: 100%;
  overflow: hidden;

}

.select_up {
  padding: 0 14px;
  font-size: 14px;
  position: absolute;
  z-index: 99999;
  background-color: white;
  top: 0px;
  width: 100%;
  border-radius: 5px 5px 0 0;

  ::v-deep .el-button {
    color: #bcbcbc;
    font-size: 14px;

    i {
      font-size: 14px;
    }
  }

  ::v-deep .el-button:hover {
    color: #409EFF;
  }

  .el-button+.el-button {
    margin-left: 6px;
  }
}

.select_list {
  margin-top: 25px;
}

  .normal{
		background:#27a64c;
	}
	.alarm{
		background:#ff8f00;

	}
	.offline{
		background:#8f8f8f;

	}
  ::v-deep .el-select-dropdown__item{
    display: flex;
    align-items: center;
  }
  .img{
    border-radius: 50%;
    width:10px;
    height: 10px;
    margin-right: 10px;
  }
</style>

